<template>
  <div>
    <BasicTable @register="registerTable" :maxHeight="450">
      <!-- 注释 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <div class="flex justify-center">
            <TableAction :actions="tableActions(record)" />
          </div>
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, CheckboxRender } from '@/components/Table';

  import { list } from '@/api/toolkit/column';
  import { onMounted, onUnmounted } from 'vue';

  // 自定义组件名称, 默认为文件名
  defineOptions({ name: 'ColumnSetting' });

  let props = defineProps(['id']);
  const tableId: number = props.id;

  // 表格列
  const tableColumns: BasicColumn[] = [
    {
      title: '列名',
      dataIndex: 'columnName',
      width: '10rem',
      align: 'left',
      fixed: 'left',
    },
    {
      title: '注释',
      dataIndex: 'columnComment',
      width: '10rem',
      align: 'left',
    },
    {
      title: '数据库类型',
      dataIndex: 'columnFullType',
      width: '10rem',
      align: 'left',
    },
    {
      title: '默认值',
      dataIndex: 'columnDefault',
      width: '18rem',
    },
    {
      title: 'java字段名',
      dataIndex: 'fieldName',
      width: '10rem',
      align: 'left',
    },
    {
      title: 'java类型',
      dataIndex: 'fieldType',
      width: '10rem',
    },
    {
      title: '主键',
      dataIndex: 'isPk',
      width: '8rem',
      customRender: ({ record, column, value }) => CheckboxRender(record, column, value, { checked: value }),
    },
    {
      title: '非空',
      dataIndex: 'nullable',
      width: '8rem',
      customRender: ({ record, column, value }) => CheckboxRender(record, column, value, { checked: value }),
    },
    {
      title: 'OnCreate',
      dataIndex: 'autoTimeOnCreate',
      width: '8rem',
      customRender: ({ record, column, value }) => CheckboxRender(record, column, value, { checked: value }),
    },
    {
      title: 'OnUpdate',
      dataIndex: 'autoTimeOnUpdate',
      width: '8rem',
      customRender: ({ record, column, value }) => CheckboxRender(record, column, value, { checked: value }),
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '10rem',
      fixed: 'right',
    },
  ];

  // 表格-按钮
  const tableActions = (record): ActionItem[] => [
    {
      icon: 'humbleicons:download',
      tooltip: '生成代码',
      popConfirm: {
        title: '生成会覆盖现有代码',
        placement: 'top',
        confirm: generateTs.bind(null, record),
      },
    },
  ];

  async function queryTableColumns() {
    return await list({ tableId });
  }

  // 注册表格
  const [registerTable, { reload }] = useTable({
    api: queryTableColumns,
    columns: tableColumns,
    useSearchForm: false, // 搜索框配置: 是否打开搜索框、搜索框配置
    showTableSetting: false, // 是否显示设置按钮
    size: 'small',
    bordered: true, // 是否包含边框
    showIndexColumn: true, // 是否包含序号列
    rowKey: 'id',
    pagination: false,
    titleHelpMessage: '根据服务端领域对象 Ts 的对象',
    immediate: true,
  });

  // 删除
  async function generateTs(record: Recordable) {
    reload();
  }
  console.log('溪红心阿斯顿法师打发斯蒂芬');

  onMounted(() => {
    console.log('执行mounted  *** ');
  });

  onUnmounted(() => {
    console.log('xxxxx -> onUnmounted');
  });

  // defineExpose({
  //   validate
  // });
</script>
